<template>
  <div>
    <div id="demo">
      <button v-on:click="show = !show">Toggle</button>
      <transition name="fade">
        <p v-if="show">hello</p>
      </transition>
    </div>
  </div>
</template>
<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: all 0.2s;
}

/* name时fade的元素 刚要进来和已经离开是opacity必须是0 */
/* v-event   定义元素插入之前
   v-event-to 定义进入过渡的结束状态
 v-event-active 定义进入时的过度状态
    v-leave 定义即将离开时的状态
      v-leave-to 定义离开时过度结束后的状态
    `v-leave-active`：定义离开时的过渡状态
      */
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
.fade-enter {
  margin-top: -50px;
}
.fade-leave-to {
  margin-top: 50px;
}
</style>

<script>
export default {
  data() {
    return {
      show: true,
    };
  },
};
</script>
